<template>
<div style="display:flex">
    <div class='right'>
        <img :src="phoneDetail.image[changecolor]" alt="">
    </div>
    <div class="left">
        <div class='rom comment' style="font-size:22px">{{phoneDetail.description}}</div>
        <div class='rom price'>价格：<span>￥{{phoneDetail.price}}</span></div>
        <div class='rom xinhao'>型号：{{phoneDetail.type}}</div>
        <div class="rom ram">内存：{{phoneDetail.ram}}</div>
        <div class="rom">储存：{{phoneDetail.rom}}</div>
        <div class="rom sys">系统：{{phoneDetail.os}}</div>
        <div class="rom weight">重量：{{phoneDetail.weight}}</div>
        <div class="rom color">
            <span>颜色:</span>
            <RadioGroup  v-model="changecolor" type="button">
        <Radio v-for="(item,index) in phoneDetail.color" :key="item" :label="index">{{item}}</Radio>
    </RadioGroup>
        </div>
        <div class="row"><button type="primary" style="font-size:16px;">加入购物车</button></div>
    </div>
</div>
</template>

<script>
import service from '@/service'
    export default{
        name:'details',
        data(){
            return{
                phoneDetail:{},
                changecolor:'0'
            }
        },
        // methods:{
        //     changecolor(){

        //     }
        // },
        created(){
            console.log(this.$route.query.id)
            service.get('/v1/home/phoneDetail?id='+this.$route.query.id)
            .then((res)=>{
                console.log(res)
                this.phoneDetail=res
            })
        }
    }
</script>

<style lang="scss" scoped>

.img{
    width:px;
}
.rom{
    margin:20px 0;
    font-size:16px;
    text-align:left;
}

span{
    color: red;
    text-align: left;
    font-size: 25px;
}


</style>